iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 4
0
Modern Web

從零開始遲來的Web開發筆記系列 第 4

Web Component超有用網頁模組化 - 顯示HTML imports中的內容

  • 分享至 

  • xImage
  •  

顯示HTML imports

從上一次嘗試可以知道,import的HTML的階層樣式表是會影響到主要DOM的,實際上Javascript也是一樣,所以還沒有像是程式語言命名空間或是package的概念,可以直接在被引入的HTML文件中加入javascript:alert("Hello")

但是import的HTML的DOM內容並不會直接顯示出來。換而言之雖然CSS和Javascript沒被隔離,但是HTML是被隔離的。透過取得的link元素,會有一個import的屬性,其值就是被引入的HTML DOM,在透過原本就有的appendChild插入到顯示的DOM裏面。

部分範例

// 取得link元素
import_html = document.querySelector('link[rel="import"]');

// 取得import html的DOM,並取得期中想要插入的標籤節點
var child_dom_node = import_html.import.querySelector("#myheader");

// 插入到現有的DOM之中
document.body.appendChild(child_dom_node);

所以結合上次的hello.html,完整會是:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>for test</title>
  </head>
  <body>
    <link rel="import" href="./my-header.html">
    <h1>Hello World For Test</h1>
  </body>
  <script>

    var import_html = document.querySelector('link[rel="import"]');
    var child_dom_node = import_html.import.querySelector("#myheader");
    document.body.appendChild(child_dom_node);
  </script>
</html>

至於Shadow DOM和CustomElementRegister,我還需要在稍微瞭解一下。但簡單說,CustomElementRegister可以直接註冊新的tag,比如<my-tag></my-tag>來使用,我這才知道Vue.js中的有點像可能在chrome就是直接使用這個方法。Shadow DOM則就真的有一點命名空間的味道了,不知道CSS和Javascripte是不是也會被隔離。


上一篇
Web Component超有用網頁模組化 - 第一次使用HTML imports
下一篇
Web Component超有用網頁模組化 - Shadow DOM
系列文
從零開始遲來的Web開發筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言